<template>
  <div>
    <div class="top">
      <el-button v-for="(item,index) in btnStr" 
      :key="index" 
      type="primary" 
      round 
      style="width: 124px;height: 32px;margin-right: 10px"
      @click="clickFunction(index)">
        {{ item }}
      </el-button>
      <el-input
        size="medium"
        placeholder="管理员姓名"
        suffix-icon="el-icon-search"
        style="width:200px;height: 36px;margin-left: 30px"
      >
      </el-input>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="whereClinic" width="159" label="所属门诊"></el-table-column>
        <el-table-column prop="adminName" width="159" label="管理员姓名"></el-table-column>
        <el-table-column prop="adminPhone" width="159" label="管理员电话"></el-table-column>
        <el-table-column prop="adminType" width="159" label="管理员电话"></el-table-column>
        <el-table-column prop="sex" width="159" label="性别"></el-table-column>
        <el-table-column prop="createTime" width="159" label="创建时间"></el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="addAdminDialog"
      :append-to-body="true"
      :title="btnStr[dialogIndex]"
      :visible.sync="addDialog"
      @close="dialogClose"
    >
      <addAdmin
        v-if="dialogIndex === 0"
        ref="addAdmin">
      </addAdmin>
      <addAdmin
        v-if="dialogIndex === 1"
        ref="addAdmin">
      </addAdmin>
      <div class="flexRight">
        <div>
          <span slot="footer" class="dialog-footer">
            <el-button
              class="dialogBtn"
              round
              @click="closeDialog"
            >取消</el-button>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              class="dialogBtn"
              round
              @click="dialogSure"
            >保存</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addAdmin from './components/addAdmin';
import {adminGroupIdSerach} from '@/api/oper'
export default {
  name: 'AdminList',
  components: {
    addAdmin
  },
  data() {
    return {
      btnStr: ['新增集团管理员', '新增账单管理员', '编辑', '删除', '重置密码'],
      tableData: [],
      addDialog: false,
      dialogIndex: -1,
      groupId: ''
    };
  },
  mounted(){
    let groupId = JSON.parse(this.$route.query.blocDetail).id;
    adminGroupIdSerach({groupId:groupId,userType:'group_user_type'})
    .then((res)=>{
      console.log(res)
    })
  },
  methods: {
    dialogSure() {
      switch (this.dialogIndex) {
        case 0:
          this.$refs.addAdmin.addAdmin();
      }
    },
    clickFunction(e) {
      this.dialogIndex = e;
      this.addDialog = true;
    },
    dialogClose() {
      this.dialogIndex = -1;
    },
    // 关闭弹窗
    closeDialog() {
      this.addDialog = false;
      this.dialogIndex = -1;
    },
  }
  
};
</script>

<style lang='scss'>
  .addAdminDialog{
    .el-dialog__body{
      padding: 0 !important;
      
    }
    .el-dialog{
      width: 860px;
    }
  }
  .top{
    margin: 30px 0px 30px 20px;
  }
  .flexRight {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #E6E6E6;
  }
</style>
